/*
  学习目标：使用 useEffect 模拟卸载时的生命周期
  需求：挂载后开启监听窗口的改变事件、卸载时取消监听的事件
  在 useEffect 返回函数，那么这个函数就是页面卸载时的 回调函数
  场景：移除定时器，绑定的事件等等
*/
import React, { useState, useEffect } from 'react';

export default function App() {
  const [isShow, setIsShow] = useState(true);
  useEffect(() => {
    // 建议这里写完整，不要简洁写法
    // 执行代码，可能会返回 函数，又写成了单行，那么就会被绑定到 页面卸载时的回调函数
  }, [isShow]);

  return (
    <div>
      <button onClick={() => setIsShow(!isShow)}>点我切换子组件</button>
      {isShow && <Child></Child>}
    </div>
  );
}

function Child() {
  useEffect(() => {
    console.log('我是Child组件，被创建了');
    let timer = setInterval(() => {
      console.log('setInterval执行了 -----> ');
    }, 1000);

    return () => {
      // 页面卸载时会执行的代码
      console.log('我是Child组件，被销毁了');
      clearInterval(timer);
    };
  });
  return <div>我是Child组件</div>;
}
